<template>
  <div class="recommend">
    <div v-if="title">
      <template v-if="globalStore?.configData?.web_xueyuanjiuye != null">
        <div>
          <div class="common-title">{{ title }}</div>
          <div class="common-desc">
            {{ desc.replace(/person_nums/gi, globalStore.configData?.web_xueyuanjiuye) }}
          </div>
        </div>
      </template>
      <template v-else>
        <div class="pc-skeleton">
          <div class="common-title"><Skeleton width="20%" height="40px"></Skeleton></div>
          <div class="desc-skeleton common-desc">
            <Skeleton width="60%" height="30px"></Skeleton>
          </div>
        </div>
        <div class="mobile-skeleton">
          <div class="common-title"><Skeleton width="20%"></Skeleton></div>
          <div class="desc-skeleton common-desc">
            <Skeleton width="60%"></Skeleton>
          </div>
        </div>
      </template>
    </div>
    <div class="recommend-job" v-if="data">
      <div class="job-item" v-for="item in data" :key="item.id">
        <div class="title">
          <div class="text">{{ item.title }}</div>
          <img
            class="star-icon"
            v-if="item.is_collect === 'no'"
            src="~/assets/images/common/star.png"
            alt=""
          />
          <img
            class="star-icon"
            v-else
            src="~/assets/images/common/star-active.png"
            alt=""
          />
        </div>
        <div class="divider-line"></div>
        <div class="name">{{ item.air_title }}｜{{ item.position_title }}</div>
        <div class="desc">{{ item.descri }}</div>
        <div class="tag">
          <div class="tag-item">{{ item.work_title }}</div>
          <div class="tag-item">{{ item.cat_title }}</div>
          <div class="tag-item">{{ item.edu_title }}</div>
          <div class="tag-item">{{ item.tag_title }}</div>
        </div>
        <div class="footer">
          <div class="local">
            <img class="position-icon" src="~/assets/images/common/position.png" alt="" />
            <span>{{ item.address_title }}</span>
          </div>
          <div class="salary">{{ item.salary_title }}</div>
        </div>
        <div class="job-item-view-detail">
          <div @click="goto('/job/detail', { id: item.id })">
            {{ $t("btnText.view_course_detail")
            }}<i class="iconfont icon-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>
    <template v-else>
      <div class="pc-skeleton">
        <div class="recommend-job">
          <div class="job-item" v-for="i in count" :key="i">
            <div class="title">
              <Skeleton width="150px" height="30px"></Skeleton>
              <Skeleton width="30px" height="30px" radius="50%"></Skeleton>
            </div>
            <div class="divider-line"></div>
            <div class="desc">
              <Skeleton :rows="3"></Skeleton>
            </div>
            <div class="footer">
              <Skeleton width="60px" height="30px"></Skeleton>
              <Skeleton width="60px" height="30px"></Skeleton>
            </div>
          </div>
        </div>
      </div>
      <div class="mobile-skeleton">
        <div class="recommend-job">
          <div class="job-item" v-for="i in count" :key="i">
            <div class="title">
              <Skeleton width="800px" height="120px"></Skeleton>
              <Skeleton width="120px" height="120px" radius="50%"></Skeleton>
            </div>
            <div class="divider-line"></div>
            <Skeleton :rows="3" mobile></Skeleton>
            <div class="footer">
              <Skeleton width="300px" height="120px"></Skeleton>
              <Skeleton width="300px" height="120px"></Skeleton>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import type { TalentItem } from "../types/talent";
import { useGlobalStore } from "../store";
const globalStore = useGlobalStore();

type Props = {
  title?: string;
  desc?: string;
  data?: TalentItem[];
  count?: number;
};
const props = withDefaults(defineProps<Props>(), {
  title: "",
  desc: "",
  count: 6,
});
</script>

<style scoped lang="less">
.desc-skeleton,
.common-title {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .mobile-skeleton {
    .common-desc {
      margin-top: 50px;
    }
  }
}
.recommend-job {
  display: grid;
  gap: var(--yd-gap);
  grid-template-columns: repeat(2, 1fr);
  .job-item {
    position: relative;
    &:hover {
      .job-item-view-detail {
        opacity: 1;
        visibility: visible;
      }
    }
    .job-item-view-detail {
      transition: all 0.5s;
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
      background: rgba(0, 0, 0, 0.6);
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #ffffff;
      div {
        cursor: pointer;
      }
      i {
        margin-left: 4px;
      }
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      color: #172026;
    }
    .name,
    .desc,
    .footer,
    .local {
      font-size: 14px;
      color: #36434d;
    }
    .desc {
      margin: 12px 0;
      height: 100px;
      color: #70818c;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
    }
    .tag {
      display: flex;
      font-size: 12px;
      gap: 8px;
      flex-wrap: wrap;
      .tag-item {
        padding: 4px 8px;
        background-color: #f5f8fa;
        border-radius: 6px;
      }
    }
    .footer {
      margin-top: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .local {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .salary {
        font-size: 18px;
        color: #ff4060;
      }
    }
  }
}

.pc-skeleton {
  .desc {
    height: auto !important;
  }
}

@media screen and (max-width: 768px) {
  .recommend-job {
    grid-template-columns: 1fr;
    gap: 82px;
    .job-item {
      border-bottom: 3px solid #e6edf2;
      padding-bottom: 82px;
      .job-item-view-detail {
        font-size: 82px;
      }
      .title {
        font-size: 82px;
      }
      .star-icon {
        width: 123px;
        height: 123px;
      }
      .divider-line {
        margin-top: 71px;
        width: 655px;
        margin-bottom: 61px;
      }
      .desc {
        display: none;
      }
      .name,
      .desc,
      .footer,
      .local {
        font-size: 72px;
      }
      .tag {
        font-size: 61px;
        margin-top: 61px;
        gap: 41px;

        .tag-item {
          padding: 20px 41px;
          border-radius: 31px;
        }
      }
      .footer {
        margin-top: 77px;
        .salary {
          font-size: 92px;
        }
      }
    }
  }
}
</style>
